<template>
  <div class="pie1">
    <div class="pie1" id="group-chart"></div>
    <el-dialog :visible.sync="isVisible" :modal="false" custom-class="dialog">
      <div slot="title" style="display: flex;align-items: center;font-size: 20px;font-weight: 600">
        <img class="cursor" src="~@/assets/img/cursor.png">
        {{title}}
      </div>
      <el-table :data="tableData" style="height: 300px">
        <el-table-column
          type="index"
          label="序号"
          width="80">
        </el-table-column>
        <el-table-column property="fullName" label="姓名"></el-table-column>
        <el-table-column property="currentPosition" label="职务">
        </el-table-column>
        <el-table-column property="dateOfBirth" label="出生年月">
        </el-table-column>
        <el-table-column property="phoneNumber" label="手机号"></el-table-column>
        <el-table-column property="divisionOfLabor" label="组内分工">
          <template slot-scope="scope">
            {{ getDict(dict.znfg, scope.row.divisionOfLabor) }}
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>

import { getTeamPerson, organizationStatus } from '@/api';

let style = {
  fontSize: 24,
};
import labelBg from '@/assets/img/组办情况-label.png';
import zuban from '@/assets/img/组办背景.png';

export default {
  data() {
    return {
      options: {},
      isVisible: false,
      tableData: [],
      title:''
    };
  },
  props: ['termId', 'cycleId'],
  dicts: ['znfg'],
  created() {
  },
  watch: {
    cycleId(cycleId) {
      this.getData(cycleId);
    },
  },
  mounted() {
    this.getData(this.cycleId);
  },
  beforeDestroy() {
  },
  methods: {
    openDialog(i) {
      this.title=i.name;
      this.getTableData(i.id);
      this.isVisible = true;
    },
    async getTableData(teamId) {
      const params = {};
      const res = await getTeamPerson(teamId);
      this.tableData = res.data;
    },
    async getData(cycleId) {
      const res = await organizationStatus(this.termId, cycleId);
      this.initChart(res.data);
    },
    initChart(items) {
      var myChart = this.$echarts.init(document.getElementById('group-chart'));
      let datas = [];
      items.teamList.forEach((item, ix) => {
        const p = {
          value: item.id.length, name: item.xczName,
          id: item.id,
        };
        datas.push(p);
      });
      let option = {
        /*       tooltip: {
                 trigger: 'item',
                 formatter: '{b} : {c} ({d}%)',
               },*/
        graphic: {
          elements: [
            {
              type: 'image',
              // z: 3,
              style: {
                image: zuban,
                width: 500,
                height: 350,
              },
              left: 'center',
              top: 'center',
            },
          ],
        },
        grid: {},
        label: {
          show: true,
          formatter: '{a|{b}}',
          color: '#fff',
          rich: {
            a: {
              color: '#fff',
              height: 44,
              fontSize: 15,
              align: 'center',
              backgroundColor: {
                image: labelBg,
              },
            },
          },
          fontSize: 15,
          fontFamily: 'MicrosoftYaHei',
          width: 134,
          height: 44,
        },
        series: [
          {
            name: '组办情况',
            type: 'pie',
            radius: ['50%', '50%'],
            avoidLabelOverlap: false,
            roundCap: false,
            symbol: true,
            emphasis: {
              label: {
                show: true,
                fontSize: 20,
                fontWeight: 'bold',
              },
            },
            labelLine: {
              show: false,
              showAbove: true,
              lineStyle: {
                cap: 'square',
                join: 'square',
              },
            },
            data: datas,
            animationEasing: 'cubicInOut',
            animationDuration: 1600,
          },
        ],
      };
      myChart.setOption(option);
      myChart.on('click', 'series.pie.label', (params) => {
        this.openDialog(params.data);
      });
    },
    clearData() {
    },
  },
};
</script>
<style lang='scss' scoped>
.pie1 {
  width: 100%;
  height: 100%
}
</style>
